<nz-card class="m-b-2">
  <div class="common-search-wrap">
    <div class="common-search-forms">
      <div class="common-form-item">
        <label class="common-search-label">订单编号</label>
        <div class="common-search-conrol">
          <input
            nz-input
            placeholder="请输入订单编号"
            [(ngModel)]="seachParams.okey"
          />
        </div>
      </div>

      <div class="common-form-item">
        <label class="common-search-label">快递单号</label>
        <div class="common-search-conrol">
          <input
            nz-input
            placeholder="请输入快递单号"
            [(ngModel)]="seachParams.expno"
          />
        </div>
      </div>

      <div class="common-form-item">
        <label class="common-search-label">关联靓机单号</label>
        <div class="common-search-conrol">
          <input
            nz-input
            placeholder="请输入关联靓机单号"
            [(ngModel)]="seachParams.renewalNo"
          />
        </div>
      </div>

      <div class="common-form-item">
        <label class="common-search-label">机器编码</label>
        <div class="common-search-conrol">
          <input
            nz-input
            placeholder="请输入机器编码"
            [(ngModel)]="seachParams.phoneCode"
            (ngModelChange)="searchCodeChange($event)"
          />
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">机器序列号</label>
        <div class="common-search-conrol">
          <input
            nz-input
            placeholder="请输入机器序列号"
            [(ngModel)]="seachParams.phoneSerialNumber"
          />
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">下单机型</label>
        <div class="common-search-conrol">
          <input
            nz-input
            placeholder="请输入下单机型"
            [(ngModel)]="seachParams.umname"
          />
        </div>
      </div>
      <div class="common-form-item">
        <label class="common-search-label">所属品类</label>
        <div class="common-search-conrol">
          <nz-select
            [(ngModel)]="seachParams.category"
            nzPlaceHolder="请选择所属品类"
            nzAllowClear
          >
            <nz-option [nzValue]="1" nzLabel="手机"></nz-option>
            <nz-option [nzValue]="2" nzLabel="平板"></nz-option>
          </nz-select>
        </div>
      </div>

      <div class="common-form-item">
        <label class="common-search-label">品牌筛选</label>
        <div class="common-search-conrol">
          <nz-select
            [(ngModel)]="brandSelected"
            nzPlaceHolder="请选择所属品牌"
            nzAllowClear
            [nzMaxTagCount]="1"
            nzMode="multiple"
          >
            <nz-option
              *ngFor="let option of brandOptions"
              [nzValue]="option.id"
              [nzLabel]="option.name"
            ></nz-option>
          </nz-select>
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">寄件人</label>
        <div class="common-search-conrol">
          <input
            nz-input
            placeholder="请输入姓名或手机号"
            [(ngModel)]="seachParams.lnker"
          />
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">订单渠道</label>
        <div class="common-search-conrol">
          <nz-select
            nzMode="multiple"
            [nzMaxTagCount]="1"
            nzShowSearch
            nzAllowClear
            nzPlaceHolder="全部"
            [(ngModel)]="orderSourceSelected">
            <nz-option
              *ngFor="let item of orderSourceOptions"
              [nzLabel]="item.name"
              [nzValue]="item.content">
            </nz-option>
          </nz-select>
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">推广渠道</label>
        <div class="common-search-conrol">
          <nz-select
            nzMode="multiple"
            [nzMaxTagCount]="1"
            nzShowSearch
            nzAllowClear
            nzPlaceHolder="全部"
            [(ngModel)]="seachParams.cidList">
            <nz-option
              *ngFor="let item of extensionOptions"
              [nzLabel]="item.name"
              [nzValue]="item.content">
            </nz-option>
          </nz-select>
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">下单方式</label>
        <div class="common-search-conrol">
          <nz-select
            nzShowSearch
            nzAllowClear
            nzPlaceHolder="全部"
            [(ngModel)]="seachParams.orderWay">
            <nz-option nzLabel="估价下单" [nzValue]="1"></nz-option>
            <nz-option nzLabel="批量下单" [nzValue]="2"></nz-option>
            <nz-option nzLabel="快速下单" [nzValue]="3"></nz-option>
          </nz-select>
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">订单状态</label>
        <div class="common-search-conrol">
          <nz-select
            nzMode="multiple"
            [nzMaxTagCount]="1"
            nzShowSearch
            nzAllowClear
            nzPlaceHolder="全部"
            [(ngModel)]="orderStateSelected">
            <nz-option
              *ngFor="let item of orderStateOptions"
              [nzLabel]="item.label"
              [nzValue]="item.id">
            </nz-option>
          </nz-select>
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">下单身份</label>
        <div class="common-search-conrol">
          <nz-select
            nzShowSearch
            nzAllowClear
            nzPlaceHolder="全部"
            [(ngModel)]="seachParams.orderType">
            <nz-option nzLabel="登录用户" [nzValue]="1"></nz-option>
            <nz-option nzLabel="游客" [nzValue]="2"></nz-option>
          </nz-select>
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">用户身份</label>
        <div class="common-search-conrol">
          <nz-select
            nzShowSearch
            nzAllowClear
            nzPlaceHolder="全部"
            [(ngModel)]="seachParams.userId">
            <nz-option nzLabel="爱思用户" nzValue="1"></nz-option>
            <nz-option nzLabel="游客" nzValue="0"></nz-option>
          </nz-select>
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">验机结果</label>
        <div class="common-search-conrol">
          <nz-select
            nzShowSearch
            nzAllowClear
            nzMode="multiple"
            [nzMaxTagCount]="1"
            nzPlaceHolder="全部"
            [(ngModel)]="restypeSelected"
            (ngModelChange)="multipleChange($event, 'restype')">
            <nz-option
              *ngFor="let item of resultOptions"
              [nzLabel]="item.label"
              [nzValue]="item.id">
            </nz-option>
          </nz-select>
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">验机状态</label>
        <div class="common-search-conrol">
          <nz-select
            nzShowSearch
            nzAllowClear
            nzMode="multiple"
            [nzMaxTagCount]="1"
            nzPlaceHolder="全部"
            [(ngModel)]="checkStatusSelected"
            (ngModelChange)="multipleChange($event, 'checkStatus')">
            <ng-container *ngFor="let item of machineStateOptions">
              <nz-option [nzLabel]="item.label" [nzValue]="item.id"></nz-option>
            </ng-container>
          </nz-select>
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">退货信息</label>
        <div class="common-search-conrol">
          <nz-select
            nzShowSearch
            nzAllowClear
            nzPlaceHolder="全部"
            [(ngModel)]="seachParams.backI5addrid">
            <nz-option nzLabel="无" nzValue="0"></nz-option>
            <nz-option nzLabel="有" nzValue="1"></nz-option>
          </nz-select>
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">下单时间</label>
        <div class="common-search-conrol">
          <nz-range-picker
            [(ngModel)]="placeOrderTimes"
            (ngModelChange)="timeChange($event, ['otime11BeginTime', 'otime11EndTime'])">
          </nz-range-picker>
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">揽件时间</label>
        <div class="common-search-conrol">
          <nz-range-picker
            [(ngModel)]="solicitationTimes"
            (ngModelChange)="timeChange($event, ['otime13BeginTime', 'otime13EndTime'])">
          </nz-range-picker>
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">到货签收时间</label>
        <div class="common-search-conrol">
          <nz-range-picker
            [(ngModel)]="signForTimes"
            (ngModelChange)="timeChange($event, ['otime14BeginTime', 'otime14EndTime'])">
          </nz-range-picker>
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">成交时间</label>
        <div class="common-search-conrol">
          <nz-range-picker
            [(ngModel)]="dealTimes"
            (ngModelChange)="timeChange($event, ['otime19BeginTime', 'otime19EndTime'])">
          </nz-range-picker>
        </div>
      </div>

      <div class="common-form-item">
        <button nz-button nzType="primary" class="m-r-8" [nzLoading]="tableParams.tableLoading" (click)="seachData()">查询</button>
        <button nz-button nzType="default" (click)="resetData()">重置</button>
        <button nz-button nzType="link" (click)="isCollapse = !isCollapse">
          {{ isCollapse ? '收起' : '展开' }}<i nz-icon [nzType]="isCollapse ? 'up' : 'down'" nzTheme="outline"></i>
        </button>
      </div>
    </div>
  </div>
</nz-card>

<nz-card>
  <div class="p-b-15">
    <button nz-button nzType="primary" [nzLoading]="exportLoading" (click)="exportTable()">
      <i nz-icon nzType="download"></i>导出
    </button>
  </div>

  <div class="pagination-wrap-position">
    <div class="table-wrap">
      <nz-table
        #basicTable
        nzSize="small"
        nzShowSizeChanger
        nzShowQuickJumper
        nzOuterBordered
        [nzScroll]="{ x: '1100px' }"
        [nzFrontPagination]="false"
        [nzLoadingDelay]="100"
        [nzLoading]="tableParams.tableLoading"
        [nzData]="tableData"
        [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
        [nzTotal]="tableParams.total"
        [nzPageIndex]="tableParams.page"
        [nzPageSize]="tableParams.pageSize"
        [nzShowTotal]="totalTemplate"
        (nzPageIndexChange)="onPageIndexChange($event)"
        (nzPageSizeChange)="onPageSizeChange($event)"
      >
        <thead>
          <tr>
            <th nzAlign="center" nzWidth="220px" nzLeft>订单编号</th>
            <th nzAlign="center" nzWidth="250px">平台渠道</th>
            <th nzAlign="center" nzWidth="120px">订单状态</th>
            <th nzAlign="center" nzWidth="200px">关联靓机单号</th>
            <th nzAlign="center" nzWidth="100px">退货信息</th>
            <th nzAlign="center" nzWidth="150px">验机状态</th>
            <th nzAlign="center" nzWidth="120px">下单身份</th>
            <th nzAlign="center" nzWidth="120px">用户身份</th>
            <th nzAlign="center" nzWidth="180px">下单机型</th>
            <th nzAlign="center" nzWidth="150px">预估合计</th>
            <th nzAlign="center" nzWidth="150px">验机合计</th>
            <th nzAlign="center" nzWidth="150px">验机结果</th>
            <th nzAlign="center" nzWidth="120px">寄件人手机</th>
            <th nzAlign="center" nzWidth="120px">寄件人姓名</th>
            <th nzAlign="center" nzWidth="180px">物流单号</th>
            <th nzAlign="center" nzWidth="120px">下单方式</th>
            <th nzAlign="center" nzWidth="160px">下单时间</th>
            <th nzAlign="center" nzWidth="160px">揽件时间</th>
            <th nzAlign="center" nzWidth="160px">到货签收时间</th>
            <th nzAlign="center" nzWidth="160px">成交时间</th>
            <th nzAlign="center" nzWidth="160px">更新时间</th>
            <th nzAlign="center" nzWidth="180px" nzRight>操作</th>
          </tr>
        </thead>

        <tbody>
          <tr *ngFor="let data of basicTable.data; let index = index;">
            <!-- 订单编号 -->
            <td nzAlign="center" nzLeft>{{ data.okey || '-' }}</td>

            <!-- 平台渠道 -->
            <td nzAlign="center">
              <!-- 平台 & 身份 -->
              <div>
                <ng-container *ngIf="data.platform;else templatePlatform">
                  <nz-tag [nzColor]="'blue'">
                    {{ filterPlatform(data.platform) }}
                  </nz-tag>
                </ng-container>
                <ng-template #templatePlatform>-</ng-template>

                <ng-container>
                  <nz-tag [nzColor]="'#2db7f5'" *ngIf="data?.userType == 2">B端</nz-tag>
                  <nz-tag [nzColor]="'#87d068'" *ngIf="data?.userType == 1">C端</nz-tag>
                </ng-container>
              </div>
              <!-- 推广渠道 cid -->
              <div class="p-t-5">
                <ng-container *ngFor="let extension of extensionOptions">
                  <nz-tag
                    *ngIf="extension.content == data.cid"
                    nzColor="success">
                    {{ extension.name }}
                  </nz-tag>
                </ng-container>
              </div>
            </td>

            <!-- 订单状态 -->
            <td nzAlign="center">
              <span [ngStyle]="{'color': data.ostat | orderState: 'color'}">
                {{ data.ostat | orderState: 'text' }}
              </span>
            </td>

            <!-- 关联靓机单号 -->
            <td nzAlign="center">
              {{ data.renewalNo || '-' }}
            </td>

            <!-- 退货信息 -->
            <td nzAlign="center">
              <span [ngStyle]="{'color': (data?.backI5addrid == '0' || !data?.backI5addrid) ? '#ff4d4f' : '#52c41a'}">
                {{ (data?.backI5addrid == '0' || !data?.backI5addrid) ? '无' : '有' }}
              </span>
            </td>

            <!-- 验机状态 -->
            <td nzAlign="center">
              {{ data.checkStatus | machineInspectionStatus }}
            </td>

            <!-- 下单身份 -->
            <td nzAlign="center">
              <ng-container [ngSwitch]="data.orderType">
                <span *ngSwitchCase="1" style="color: #52c41a;">登录用户</span>
                <span *ngSwitchCase="2" style="color: #909399;">游客</span>
                <span *ngSwitchCase="3" style="color: #909399;">游客</span>
                <span *ngSwitchDefault>-</span>
              </ng-container>
            </td>

            <!-- 用户身份 -->
            <td nzAlign="center">
              <ng-container *ngIf="data.user_id && data.user_id != '0';else templateUser">
                <button nz-button nzType="link" (click)="userInfoPreview(data)">爱思用户</button>
              </ng-container>
              <ng-template #templateUser>游客</ng-template>
            </td>

            <!-- 下单机型 -->
            <td nzAlign="center">{{ data.umname || '-' }}</td>

            <!-- 预估合计 = 预估价 + 加价 + 下单抽奖价 -->
            <td nzAlign="center">
              {{ (data.uprc || 0) + (data.orderAprc || 0) + (data.cprc || 0) }}
              <span *ngIf="data.orderAprc || data.cprc">（含加价{{ (data.orderAprc || 0) + (data.cprc || 0) }}）</span>
            </td>

            <!-- 验机合计 = 验机价 + 加价 + 下单抽奖价 -->
            <td nzAlign="center">
              <ng-container *ngIf="data?.phoneCheckList?.length && data?.ostat !== 21;else templateyhj">
                <p [ngStyle]="{'color': ((data.bprc || 0) + (data.aprc || 0) + (data.cprc || 0)) < ((data.uprc || 0) + (data.orderAprc || 0) + (data.cprc || 0)) ? '#FF0000' : ''}">
                  {{ (data.bprc || 0) + (data.aprc || 0) + (data.cprc || 0) }}
                  <span *ngIf="data.aprc || data.cprc">（含加价{{ (data.aprc || 0) + (data.cprc || 0) }}）</span>
                </p>
              </ng-container>
              <ng-template #templateyhj>-</ng-template>
            </td>

            <!-- 验机结果 -->
            <td nzAlign="center">{{ data.restype | machineResult }}</td>

            <!-- 寄件人手机 -->
            <td nzAlign="center">{{ data.lnktel || '-' }}</td>

            <!-- 寄件人姓名 -->
            <td nzAlign="center">{{ data.lnker || '-' }}</td>

            <!-- 快递单号 -->
            <td nzAlign="center">{{ data.expno || '-' }}</td>

            <!-- 下单方式 -->
            <td nzAlign="center">
              <span [ngStyle]="{'color': data.orderWay == 2 ? '#FF9933' : ''}">
                {{ data.orderWay == 1 ? '估价下单' : data.orderWay == 2 ? '批量下单' : data.orderWay == 3 ? '快速下单' : '-' }}
              </span>
            </td>

            <!-- 下单时间 -->
            <td nzAlign="center">{{ data.otime11 || '-' }}</td>

            <!-- 揽件时间 -->
            <td nzAlign="center">{{ data.otime13 || '-' }}</td>

            <!-- 到货签收时间 -->
            <td nzAlign="center">{{ data.otime14 || '-' }}</td>

            <!-- 成交时间 -->
            <td nzAlign="center">{{ data.otime19 || '-' }}</td>

            <!-- 更新时间 -->
            <td nzAlign="center">{{ data.updateTime || '-' }}</td>

            <!-- 操作 -->
            <td nzAlign="center" nzRight>
              <button nz-button nzType="link" routerLink="/aisi-recyc/loveOrderDetails" [queryParams]="{ id: data.id }">查看</button>
              <button nz-button nzType="link" (click)="openFollowModal(data)">跟进订单</button>
            </td>
          </tr>
        </tbody>
      </nz-table>

      <!-- 分页template -->
      <ng-template #totalTemplate let-total>共有 {{ tableParams.total }} 条</ng-template>
    </div>
  </div>
</nz-card>

<!-- Modal 爱思用户信息 -->
<app-user-info-modal #userInfoRef [userId]="modalUserId"></app-user-info-modal>

<!-- 添加跟进 START -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzFooter]="null"
  [(nzVisible)]="isFollowVisible"
  nzTitle="跟进"
  (nzOnCancel)="handleCancel()">

  <div *nzModalContent>
    <div class="custom-model-body">
      <!-- body START -->
      <form nz-form class="form-modal-body" [formGroup]="followUpForm">
        <nz-form-item>
          <nz-form-label nzSpan="5" nzRequired>备注</nz-form-label>
          <nz-form-control nzSpan="19" nzErrorTip="请输入跟进内容!">
            <nz-textarea-count [nzMaxCharacterCount]="150">
              <textarea rows="5" maxlength="150" formControlName="remarks" nz-input placeholder="请输入跟进内容（必填）"></textarea>
            </nz-textarea-count>
          </nz-form-control>
        </nz-form-item>
      </form>
      <!-- body END -->
    </div>

    <div class="custom-model-foot">
      <div class="custom-foot-cont">
        <button nz-button nzType="primary" (click)="submitForm()">确定</button>
        <button nz-button nzType="default" (click)="handleCancel()">取消</button>
      </div>
    </div>
  </div>
</nz-modal>
<!-- 添加跟进 END -->
